<template>
    <div class="home-page">
       <div class="welcome-info">
            <img class="avatar" :src="userInfo?.avatar || require('@/assets/img/user-photo.png')" alt="">
            <p class="welcome-text">{{userInfo.name || '用户'}}，欢迎您！
                <template v-if="userInfo?.roleVOS">
                    <span class="role-name" v-for="(item, index) in userInfo.roleVOS" :key="index">{{item.roleName}}</span>
                </template>
            </p>
            <!-- <el-divider class="divider-wrap"></el-divider> -->
            <p>创建日期：{{creatTime}}</p>
            <p>上次登录时间：{{loginTime}}</p>
       </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import Dayjs from 'dayjs';

const store = useStore();

const userInfo = computed(() => {
    return store.state.currentUser
})

const creatTime = computed(() => {
    return fmtTime(userInfo.value.createTime);
})

const loginTime = computed(() => {
    return fmtTime(userInfo.value.latestLoginTime);
})


function fmtTime(data) {
    return data && Dayjs(data).format('YYYY-MM-DD HH:mm:ss') || '暂无';
}

// 哪个位置是定义变量
// 哪个位置是生周期
// method写在哪个位置 


</script>
<style lang="scss" scoped>
.home-page {
    padding-top: 50px;
    .welcome-info {
        position: relative;
        .avatar {
            position: absolute;
            width: 98px;
            height: 98px;
            border-radius: 50%;
            left: 40px;
            top: -15px;
            z-index: 2;
        }
        .welcome-text {
            font-size: 24px;
            display: flex;
            align-items: center;
            margin-bottom: 0;
            flex-wrap: wrap;
        }
        .role-name {
            font-size: $--font-size-small;
            color: $--color-white;
            background-color: $--color-orange;
            border-radius: 5px;
            padding: 2px 5px;
            // margin-right: 10px;
            // margin-bottom: 5px;
            margin: 5px 10px 5px 0;
        }
        .divider-wrap {
            margin: 15px 0 40px 0;
        }
        p {
            padding-left: 163px;
            color: var(--main-text);
            font-size: $--font-size-base;
        }
    }
}
</style>
